<template>
	<view class="content">
		<view class="main">

			<!-- 手机号查询 -->
			<view>
				<!-- <view class="menu_name">手机号</view> -->
				<view style="display: flex;align-items: center;">
					<input class="et_wb_num" placeholder="请输入报名手机号" maxlength="50" :value="phone" @input="onInputPhone" />
					<view class="btn_wb" style="font-size: 26rpx;" @click="onGetSmsCode">{{sms_txt}}</view>
				</view>
				<view style="display: flex;align-items: center;">
					<input class="et_wb_num" placeholder="请输入短信验证码" maxlength="50" :value="sms_code" @input="onInputSmsCode" />
					<view class="btn_wb" @click="onQueryPrize">查询</view>
				</view>
			</view>

			<view style="font-size: 24rpx;color: #aaa;margin: 12rpx 0 0rpx 0;">1.点击优惠券可显示核销二维码；2.请到站点核销,有效期至2025年12月31日；3.最终解释权归致胜物流所有。</view>

			<!-- 中奖列表 -->
			<view v-for="(item,index) in data_list" class="item_div" @click.stop="onItemClick(item,index)">
				<view style="display: flex;justify-content: space-between;">
					<view class="item_data" style="font-size: 30rpx; font-weight: bold;padding: 0 0 0 0;">
						<view>{{item.title}}</view>
						<view style="margin: 0rpx 0 0 0;">
							<view v-if="item.status == 1" style="color: #bbb;">未中奖</view>
							<view v-if="item.status == 2" style="color: orangered">未领奖</view>
							<view v-if="item.status == 3" style="color: seagreen">已领奖</view>
							<view v-if="item.status == 4">已过期</view>
						</view>
					</view>
				</view>

				<view v-if="item.money" style="align-self: center;display: flex;align-items: baseline;color: red;font-weight: bold;">
					¥
					<view style="font-size: 58rpx;padding: 0 4rpx 0 4rpx;">{{item.money}}</view>
					<!-- <view v-if="item.money" style="font-size: 22rpx;">点击展示二维码</view> -->
				</view>

				<!-- <view v-if="item.money" style="font-size: 22rpx;color: #aaa;margin: 12rpx 0 0 0;align-self: flex-end;">请您到站点核销使用</view> -->
				<!-- <view v-if="item.verifycode" style="align-self: flex-end;color: red;font-size: 24rpx;">点击展示二维码</view> -->
				<view v-if="item.verifycode" style="align-self: flex-end;color: red;font-size: 28rpx;padding: 12rpx 0 0 4rpx;font-weight: bold;" @click.stop="onCopyCode(item)">
					点击复制券码{{item.verifycode}}
				</view>

				<!-- <view style="width: 100%;height: 1rpx;background: #e0e0e0;margin: 18rpx 0 0 0;"></view> -->

			</view>
			<view v-if="!data_list || data_list.length <= 0" style="text-align: center;color: #bbb;line-height: 30vh;">
				未查询到中奖记录~
			</view>

			<view style="color: #ccc;font-size: 22rpx;margin: 60rpx 0 0 0;text-align: center;">©致胜供应链提供技术支持</view>

		</view>

		<!-- 展示弹窗 -->
		<view>
			<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0" :is-mask-click="false">
				<view class="pop_div">
					<view class="pop_div_1">
						核销码
						<view style="width: 100%;height: 1px;background-color: rgba(1, 1, 1, 0.15);"></view>
					</view>

					<view class="pop_div_2">
						<view class="pop_div_2_1">
							<view class="pop_div_2_1_hint">请工作人员扫码核销</view>
						</view>
						<view>
							<!-- <image class="img_qrcode" mode="aspectFit" :src="qrdata"></image> -->
							<uqrcode ref="uqrcode" canvas-id="qrcode" :value="genQrContent()"></uqrcode>
						</view>
						<view class="pop_div_2_1">
							<view> </view>
							<view class="pop_div_2_1_hint">请向工作人员出示</view>
						</view>
					</view>

					<view class="pop_div_3">
						<view style="width: 100%;height: 1px;background-color: rgba(1, 1, 1, 0.15);"></view>
						<view @click="onClosePop">关闭</view>
					</view>
				</view>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				sms_code: '',
				sms_txt: '获取验证码', // 验证码按钮文案
				second: 60, // 验证码计时器
				isCountDown: false, // 是否正在倒计时
				data_list: [{ name: '代金券100元' },
					{ name: '电热水壶1个' },
					{ name: '智能手机1部' },
					{ name: '功能手机1部' },
				],
				curr_prize: {}, // 记录当前操作的代金券
			}
		},

		onLoad(opts) {
			let ver = '2510181502'
			// uni.showToast({ icon: 'none', title: `当前版本：${ver}`, duration: 1000 })
			console.log(`当前版本：${ver}`);

			uni.setNavigationBarTitle({ title: '中奖查询' })

			// console.log('IS_DEBUG = ', this.IS_DEBUG);
			// if (!opts.openid) {
			// 	uni.showModal({
			// 		title: '温馨提示',
			// 		content: '未获取到用户信息，请输入报名时填写的手机号点击查询',
			// 		showCancel: false
			// 	})
			// }
			this.data_list = []
		},

		onPullDownRefresh() {
			this.getLotteryList()
		},

		methods: {

			// 复制优惠券
			onCopyCode(item) {
				uni.setClipboardData({
					data: `${item.verifycode}`,
					success: (res) => {
						uni.showToast({ title: '优惠券码已复制', icon: 'none' })
					}
				});

			},
			// 点击:获取验证码
			onGetSmsCode() {
				if (!this.phone) {
					uni.showToast({ title: '请输入手机号', icon: 'none' })
					return
				}
				if (this.isCountDown) {
					uni.showToast({ title: this.second + 's后再获取', icon: 'none' })
					return
				}
				this.reqMsg() // 请求获取验证码
			},
			// 点击:查询
			onQueryPrize() {
				if (this.IS_DEBUG) {
					// this.phone = '17705393519'
					this.getLotteryList()
				} else {
					if (!this.phone) {
						uni.showToast({ icon: 'none', title: '请输入手机号' })
						return
					}
					if (!this.sms_code) {
						uni.showToast({ icon: 'none', title: '请输入验证码' })
						return
					}
					this.reqLogin()
				}
			},
			// 点击:奖品
			onItemClick(item, index) {
				this.curr_prize = item
				if (item.title && (item.title.includes('代金') || item.title.includes('优惠') || item.title.includes('抵扣') || item.title.includes('运费'))) {
					this.onShowQrCode()
					return
				}
				uni.showModal({
					title: '恭喜您',
					content: `中奖：${item.title}`,
					showCancel: false
				})
			},

			// 输入:手机号
			onInputPhone(e) {
				this.phone = e.detail.value
			},
			// 输入:验证码
			onInputSmsCode(e) {
				this.sms_code = e.detail.value
			},

			// 接口:发送验证码
			async reqMsg() {
				let that = this
				let mobile = that.phone
				let event = 'mobilelogin'
				uni.showLoading({ title: '发送中', mask: true, })
				let res = await that.$sendSmsCode({ mobile, event })
				if (res && res.code == 1) {
					that.sms_txt = that.second + 's'
					let timer = setInterval(() => {
						that.second--
						if (that.second <= 0) {
							clearInterval(timer) // 取消计时器
							that.sms_txt = '获取验证码'
							that.second = 60
							that.isCountDown = false
						} else {
							that.sms_txt = that.second + 's'
						}
					}, 1000)
					that.isCountDown = true
				} else {
					uni.showToast({ title: res.msg ? res.msg : '系统异常', icon: 'none' })
				}
			},
			// 接口:验证码登录
			async reqLogin() {
				let that = this
				let mobile = that.phone
				let captcha = that.sms_code
				uni.showLoading({ title: '登录中', mask: true, })
				let res = await that.$mobilelogin({ mobile, captcha })
				if (res && res.code == 1) {
					this.getLotteryList()
				} else {
					uni.showToast({ title: res.msg ? res.msg : '系统异常', icon: 'none', duration: 3600 })
				}
			},
			// 接口:中奖记录
			async getLotteryList() {
				let that = this
				let phone = that.phone
				if (!phone) {
					uni.stopPullDownRefresh()
					return
				}
				uni.showLoading({ title: '查询中', mask: true, })
				let res = await that.$getLotteryList({ phone })
				if (res && res.code == 1) {
					that.data_list = res.data
				} else {
					uni.showToast({ title: res.msg ? res.msg : '系统异常', icon: 'none', duration: 3600 })
				}
			},

			// 二维码
			onShowQrCode() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
			},

			onClosePop() {
				this.$refs.popup.close()
			},
			// 生成二维码文本数据
			genQrContent() {
				let prize = {
					title: this.curr_prize.title,
					money: this.curr_prize.money,
					verifycode: this.curr_prize.verifycode
				}
				return `${JSON.stringify(prize)}`
				// return `${this.curr_prize.verifycode}`
			},

			// 微信授权登录
			onWxLogin() {
				let appid = 'wx710ec0311767dd6b'
				let redirect_uri = 'https://enroll.xman56.com' // http%3A%2F%2Fdevelopers.weixin.qq.com
				// redirect_uri = 'https%3A%2F%2Fenroll.xman56.com'
				redirect_uri = 'https%3A%2F%2Fenroll.xman56.com%2Fpages%2Findex%2Fprize_query'
				let wx_auth_url = `https://open.weixin.qq.com/connect/oauth2/authorize?
					appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
				location.href = wx_auth_url
			},
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		position: relative;
		min-height: 100vh;
		background-color: #6974DD;
	}

	.main {
		display: flex;
		flex-direction: column;
		margin: 24rpx;
		background-color: white;
		border-radius: 24rpx;
		padding: 24rpx;
	}

	.menu_name {
		margin: 36rpx 0 0 0;
		display: flex;
		align-items: center;
	}

	.sub_menu_name {
		margin: 12rpx 0 0 0;
		/* font-size: 28rpx; */
		/* color: #666; */
	}

	.et_wb_num {
		flex-grow: 1;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 12rpx;
		border: solid 1rpx #ccc;
		margin: 24rpx 0 0 0;
		padding: 0 24rpx 0 24rpx;
	}

	.btn_wb {
		width: 25%;
		height: 76rpx;
		line-height: 76rpx;
		color: white;
		text-align: center;
		font-size: 28rpx;
		margin: 24rpx 0 0 0;
		border-radius: 12rpx;
		background: #6974DD;
		margin: 24rpx 0 0 12rpx;
	}

	.item_div {
		display: flex;
		flex-direction: column;
		margin: 24rpx 0 0 0;
		padding: 24rpx;
		background-color: rgba(237, 216, 171, 1);
		border-radius: 16rpx;
	}

	.item_data {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 12rpx 0 12rpx 0;
		font-size: 30rpx;
		/* background: #ccc; */
	}

	.img_arrow {
		width: 30rpx;
		height: 30rpx;
		margin: 70rpx 0rpx 0 0;
	}


	/* pop弹窗样式 */
	.pop_div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 75vw;
		height: 48vh;
		background-color: white;
		border-radius: 20rpx;
	}

	.pop_div_1 {
		width: 100%;
		line-height: 84rpx;
		text-align: center;
		font-weight: bold;
	}

	.pop_div_2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		justify-content: space-between;
		height: 100%;
		width: 100%;
		padding: 20rpx 0 20rpx 0;
	}

	.pop_div_2_1 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.pop_div_2_1_hint {
		font-size: 30rpx;
		color: rgba(0, 0, 0, 0.55);
		text-align: center;
	}

	.btn_refresh_qrcode {
		width: 140rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #1890FF;
		color: white;
		font-size: 22rpx;
		margin: 0 20rpx 0 20rpx;
	}

	.img_qrcode {
		width: 380rpx;
		height: 380rpx;
		border: solid 1rpx rgba(1, 1, 1, 0);
	}

	.pop_div_3 {
		width: 100%;
		line-height: 84rpx;
		text-align: center;
		font-weight: bold;
	}
</style>